<template>
	<div class="smashEgg">
    <div id="main" class="egg_game_wrap">
      <div class="egg_box" :class="smash_a_golden_egg_game_dz?'dz_egg_box':''">
        <div class="egg_light"></div>
        <div class="egg">
          <ul class="eggList tamp_eggList">
            <p class="hammer" :class="smashClass" id="hammer"></p>
            <p class="resultTip" id="resultTip"><b id="result"></b></p>
            <li
              @click="handleClickSmash(index)"
              v-for="(item, index) in eggList"
              :key="item.id"
              :class="item.active ? 'curr': ''">
            </li>
          </ul>
        </div>
      </div>

      <div class="roll_top">
        <div class="roll_box">
          <div class="title_box">
            <b>游戏奖品</b>
          </div>

          <ul class="prize-list" v-if="gameprizeinfo && gameprizeinfo.length > 0">
            <li>一等奖：{{ gameprizeinfo[0].msg }} </li>
            <li>二等奖：{{ gameprizeinfo[1].msg }} </li>
            <li>三等奖：{{ gameprizeinfo[2].msg }} </li>
            <li>普通奖：{{ gameprizeinfo[3].msg }}</li>
            <li v-if="smash_a_golden_egg_game_dz && gameprizeinfo[4].msg">幸运奖：{{ gameprizeinfo[4].msg }}</li>
          </ul>
          <i class="left"></i>
          <i class="right"></i>
        </div>

      </div>
      <div class="egg_ins">
        <h3>活动时间</h3>
        <p class="egg_time">{{ gameinfo.start_time }} 至 {{ gameinfo.end_time }}</p>
      </div>
      <div class="egg_ins">
        <h3>游戏说明</h3>
        <div class="egg_intro">
          <p v-if="gameinfo.cost_point > 0">游戏消耗{{ point_name }} {{ gameinfo.cost_point }}</p>
          <p v-if="gameinfo.give_point > 0">参与游戏即送{{ gameinfo.give_point }}{{ point_name }},
            <span v-if="gameinfo.give_point_to_no_prize_only == 1">仅送给未中奖的用户.</span>
          </p>
          <p class="wordWrap">{{ gameinfo.description }}</p>
        </div>
      </div>

      <div class="egg_ins win-record">
        <h3>中奖排名</h3>
        <div class="record_table">
          <div class="win-nav">
            <span>昵称</span>
            <span>奖品</span>
            <span>等级</span>
            <span>中奖时间</span>
          </div>
          <div class="win-list-con">
            <ul>
              <wx-scroll-view :scroll-y="canScrollY" style="height:200px" @scrolltolower="onLoad">
                <li v-for="(item, index) in winerLists" :key="index">
                  <span class="win-name">{{ item.nickname }}</span>
                  <span class="win-award">{{ item.winer }}</span>
                  <span class="win-award">{{ item.level }}</span>
                  <span class="win-time">{{ item.create_time }}</span>
                </li>
              </wx-scroll-view>
            </ul>
          </div>
          <!-- <notempty name="winer_lists">
							<a href="javascript:;" class="loadmore j-loadmore"><span>加载更多</span><i class="loadmore-icon"></i></a>
							<span class="loadmore loadmore-noMoreData j-noMoreData">没有更多数据</span>
					</notempty> -->
        </div>
        <p class="record_link"><a @click="JumpTo">查看我的奖品<i class="game_record_more"></i></a></p>

      </div>
    </div>

    <game-result-dialog
      :visible.sync="gameResultVisible"
      :game_prize_id="game_prize_id"
      :getGamePrize="getGamePrize"
      @gameReload="gameReload"></game-result-dialog>

    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
    <shop-code ref="shopCode" :fromType="1"></shop-code>

  </div>
</template>

<script>
  import Vue from 'vue'
  import { List } from 'vant'
  Vue.use(List)

  import gameResultDialog from '../components/gameResultDialog'
  import { activityGame, playGames } from '@/api/marketGame/gameList'
  import { refreshPage, mpShare } from '@/utils/utils'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
  import ShopCode from '@/components/ShopCode'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        canScrollY: true,
        smashClass: '',
        eggList: [
          { id: 1, active: false },
          { id: 2, active: false },
          { id: 3, active: false }
        ],
        loading: false,
        finished: false,
        gameResultVisible: false, // 游戏结果弹窗
        need_subscribe: 0,
        rotateWheel: 0,
        gameinfo: {},
        gameprizeinfo: [],
        point_name: '',
        cost_point: '',
        give_point: '',
        winerLists: [],
        postParm: {},
        postData: {
          type: 4,
          id: '',
          order_id: '',
          p: 1
        },
        game_prize_id: '', // 获奖数据
        getGamePrize: false, // 中奖或是未中奖
        smash_a_golden_egg_game_dz: 0
      }
    },
    components: {
      gameResultDialog,
      SmallLogin,
      ShopCode
    },
    methods: {
      onLoad() {
        this.activityGameFn()
      },
      JumpTo() {
        this.$JumpName(this, 'prize-list')
      },
      /**
       * 点击转盘指针按钮
       */
      handleClickSmash(index) {
        // console.log(index,'index')
        this.smashClass = `smash_${index}`
        setTimeout(() => {
          this.$set(this.eggList[index], 'active', true)
        }, 500)
        playGames(this.postParm).then(res => {
          this.gameResultVisible = true
          const resData = res.data
          if (res.status == 1) {
            if (resData.game_parameter) {
              this.game_prize_id = res.data.game_parameter.game_prize_id
              if (resData.game_parameter.ds && resData.game_parameter.ds.winning_value == 1) {
                this.getGamePrize = true
              } else {
                this.getGamePrize = false
                if (resData.game_parameter.notwinning) {
                  const baseMsg = this.gameinfo.give_point > 0 ? `,别灰心参与也有${this.gameinfo.give_point}${this.point_name}` : ''
                  const noPrizeMsg = resData.game_parameter.notwinning + baseMsg
                  this.game_prize_id.noPrizeMsg = noPrizeMsg
                }
              }
            }
          } else {
            this.getGamePrize = false
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 游戏的默认请求
       */
      activityGameFn() {
        activityGame(this.postParm).then(res => {
          if (res.status == 1) {
            const resData = res.data
            this.need_subscribe = resData.need_subscribe
            if (resData.need_subscribe == 1) {
              this.$refs.shopCode.dialogVisible = true
              return false
            }
            this.gameprizeinfo = resData.gameprizeinfo
            this.winerLists = this.winerLists.concat(resData.winer_lists)
            this.gameinfo = resData.gameinfo
            this.point_name = resData.point_name
            this.cost_point = resData.cost_point
            this.give_point = resData.give_point
            this.smash_a_golden_egg_game_dz = resData.smash_a_golden_egg_game_dz ? resData.smash_a_golden_egg_game_dz : 0
            // 加载状态结束
            this.loading = false
            if (resData.winer_lists.length < 10) {
              this.finished = true
            }
            this.shareInfo = {
              title: resData.jsapi_title,
              imgUrl: resData.jsapi_img,
              shareParam: resData.jsapi_url.split('?')[1]
            }
            this.postParm.p++
            mpShare(true, false, '/activity/pages/smashEgg/index', this.shareInfo)
          } else {
            // this.$Error(res.msg)
          }
        })
      },
      init() {
        const param = Object.assign({}, this.postData)
        param.id = this.$route.query.id
        if (this.$route.query.id) {
          param.order_id = this.$route.query.order_id
        }
        this.postParm = param
        this.activityGameFn()
      },
      gameReload(){
        refreshPage(this)
        this.init()
      }
    },
    mounted() {
      this.init()
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
      window.addEventListener('wxshow', () => {
        small.HandleShareParams()
        if(!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })
      window.$$subscribe('loginReload', reload => {
        if (reload) {
          this.init()
        }
      })
    }
  })
</script>

<style lang="scss">
  .smashEgg{
    background: url("https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_bg2.jpg") 0 100px repeat-y #220572;
    background-size: 100% auto;
    /*砸金蛋游戏样式*/
    @mixin bg_box{
      background-color:rgba(83,35,190,0.45);
      border-radius:5px;
      -moz-box-shadow:0 3px 6px rgba(69,48,137,0.3);
      -ms-box-shadow:0 3px 6px rgba(69,48,137,0.3);
      -webkit-box-shadow:0 3px 6px rgba(69,48,137,0.3);
      box-shadow:0 3px 6px rgba(69,48,137,0.3);
    }
    .members_bottom section:first-child a{
      color: #fff;
    }
    .egg_game_wrap{
      #result{
        font-size: 32px;
      }
      .members_bottom section:first-child a{
        color: #fff;
      }
      .egg_box{
        position:relative;
        background: url("https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_bg1.png") no-repeat;
        background-size: 100%;
        &.dz_egg_box {
          background: url("https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/dz_egg_bg1.png") no-repeat;
          background-size: 100%;
        }
        .egg_light{
          position:absolute;
          top:350px;
          left:0;
          width:100%;
          height:120px;
          background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_light.png) 0 0 no-repeat;
          background-size:100%;
        }
      }
      .egg {
        width:660px;
        height: 920px;
        padding:370px 0 0;
        margin:0 auto 42px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg2.png) no-repeat bottom;
        background-size: 100%;
      }

      .eggList {
        position: relative;
        width: 100%;
        height:100%;
        li {
          width: 140px;
          height: 164px;
          position: absolute;
          left:56px;
          bottom:160px;
          z-index: 3;
          background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_01.png) no-repeat bottom;
          background-size:100% 100%;
          cursor: pointer;
          &:nth-of-type(1){
            background-image: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_01.png);
          }
          &:nth-of-type(2){
            left:240px;
            bottom:130px;
            width: 180px;
            height: 228px;
            background-image: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_02.png);
          }
          &:nth-of-type(3){
            left:460px;
            background-image: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_03.png);
          }
          &.curr {
            left:10px;
            bottom:144px;
            width:216px;
            height:204px;
            cursor: default;
            z-index: 10;
            &:nth-of-type(1){
              background-image: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_01_h.png);
            }
            &:nth-of-type(2){
              left:180px;
              bottom:108px;
              width: 282px;
              height: 270px;
              background-image: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_02_h.png);
            }
            &:nth-of-type(3){
              left:420px;
              background-image: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_03_h.png);
            }
          }
        }
      }

      //锤子
      .hammer {
        position: absolute;
        z-index: 5;
        left: 360px;
        top: 90px;
        width: 108px;
        height: 100px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_cz.png) no-repeat;
        background-size: contain;
        &.smash_0{
          animation:mymove2 0.2s 1;
        }
        &.smash_1{
          animation:mymove3 0.2s 1;
        }
        &.smash_2{
          animation:mymove1 0.2s 1;
        }
        @keyframes mymove1 {
          0%   {
            left: 200px;
          }
          10%  {
            display: block;
            left: 200px;
            top: 90px;
            transform: rotate(0);
          }
          90% {
            left: 100px;
            top: 180px;
            transform: rotate(-45deg)
          }
          100% {
            left: 100px;
            top: 180px;
            transform: rotate(-45deg)
          }
        }
        @keyframes mymove2 {
          0%   {
            left: 360px;
            top: 90px;
            transform: rotate(0);
          }
          100% {
            left: 320px;
            top: 180px;
            display: none;
            transform: rotate(-45deg)
          }
        }
        @keyframes mymove3 {
          0%   {
            left: 500px;
          }
          10%  {
            display: block;
            left: 500px;
            top: 90px;
            transform: rotate(0);
          }
          100% {
            left: 500px;
            top: 180px;
            transform: rotate(-45deg)
          }
        }
      }

      .resultTip {
        position: absolute;
        margin-left: -320px;
        width: 640px;
        padding: 12px;
        z-index: 500;
        top: 100px;
        left: 166px;
        color: #fff;
        text-align: center;
        overflow: hidden;
        display: none;
        z-index: 500;
      }

      .resultTip b {
        font-size: 28px;
        line-height: 1.4em;
      }

      .egg_ins {
        margin: 0 32px;
        overflow: hidden;
        text-align:center;
        font-size:26px;
        color: #fcf7ff;
        h3{
          display:inline-block;
          margin:40px 0;
          padding:0 30px;
          font-family: "Microsoft YaHei",sans-serif;
          font-size:32px;
          line-height:1;
          font-weight:normal;
          // color:#7e66de;
          color:#fff7cf;
          background:url("https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_title_bg.png") center no-repeat;
          background-size:contain;
        }
        p{
          line-height:56px;
          text-align:left;
        }
        .egg_time{
          padding:46px 0;
          font-size:28px;
          text-align:center;
          @include bg_box;
          /*@media screen and (max-width:320px) {
            font-size:12px;
          }*/
        }
        b {
          display: block;
          font-size: 28px;
          font-weight: bold;
        }
        .egg_intro{
          padding:40px 50px;
          @include bg_box;
          .wordWrap{
            white-space: pre-wrap!important;
            word-wrap: break-word!important;
          }
        }
      }

      //游戏奖品
      .roll_top {
        overflow:initial;
        margin: 70px 32px 20px;
        padding: 10px;
        color: #280575;
        background-color: #5323be;
        border-radius:20px;
        background-size:100% 100%;
        .roll_box{
          position:relative;
          padding:60px 100px 30px;
          border-radius:20px;
          background:#f5f0ff url("https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_jpline.png") no-repeat;
          background-size:100% 100%;
          i{
            position:absolute;
            top:50%;
            margin-top:-16px;
            width:16px;
            height:32px;
            border-radius:0 16px 16px 0;
            background-color:#5022bb;
            &.left{
              left:-2px;
            }
            &.right{
              border-radius:16px 0 0 16px;
              right:-2px;
            }
          }
        }
        .title_box{
          position:absolute;
          top:-36px;
          left:236px;
          padding:18px 64px 18px 48px;
          background:url("https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/egg_jpbg.png") no-repeat;
          background-size:100% 100%;
          b{
            font-family: "Microsoft YaHei",sans-serif;
            font-size: 32px;
            font-weight: bold;
            line-height:1;
            color:#fff4c3;
          }
        }

        ul{
          li{
            float:initial;
            padding:12px 0;
            font-size:28px;
            font-weight:bold;
            line-height: 40px;
            color:#280575
          }
        }
      }

      //中奖排名
      .win-record{
        .record_table{
          padding:40px;
          @include bg_box;
        }
        .win-nav {
          overflow: hidden;
          border-bottom: solid 2px rgba(132,119,162,0.12);
          font-size: 28px;
          span {
            float: left;
            width: 25%;
            height: 80px;
            line-height: 80px;
            color: #fff6c0;
            text-align: center;
            &:nth-child(1) {
              width:20%;
              // text-align: left;
            }
            &:nth-child(2) {
              width:30%;
            }
          }
        }
        .win-list-con{
          height:400px;
          overflow:auto;
        }
        ul {
          li {
            overflow: hidden;
            span {
              float: left;
              width: 25%;
              border-bottom: dashed 1px rgba(255,253,245,0.12);
              height: 80px;
              line-height: 80px;
              font-size: 26px;
              // color: #fff;
            }
            .win-name {
              width:20%;
              // text-align: left;
            }
            .win-award-info{
              width:30%;
            }
          }
        }

        .record_link{
          // margin: -12px 0 3px;
          // padding:0;
          text-align:center;
          // color:#fff;
          padding:40px 0;
          a{
            display:inline-block;
            height:54px;
            padding:0 24px;
            border:2px solid #5d2aff;
            border-radius:54px;
            font-size: 24px;
            color: #fff;
          }
          .game_record_more{
            display:inline-block;
            width:10px;
            height:18px;
            margin-left:10px;
            background:url("https://img.wifenxiao.com/h5-wfx/images/marketGame/smashEgg/game_record_more.png") center/cover;
          }
        }
      }

      .share-btn {
        margin-top: 60px;
      }

      .share-btn p {
        padding: 20px 0 0;
        color: #fff;
        font-size: 28px;
      }
    }
  }
</style>
